<template>
  
<div class="page">
  <div class="main-container">
    <!-- <section class="col-sm-9"> -->
      <div class="col-main">
        <div class="category-title">
          <h1><a href="/#/shopping_cart/">购物车</a></h1>
        </div>    
        <ul class="products-grid">

            <li v-for='item in items' class="item col-lg-4 col-md-3 col-sm-4 col-xs-12">
              <div class="item-inner">
                    <div class="product-block">
                        <div class="product-image"> <a href="product_detail.html">
                          <figure class="product-display">
                            <div class="new-label new-top-left">New</div>
                            <img src="../assets//product1.jpg" class="lazyOwl product-mainpic" alt=" Sample Product" style="display: block;"> <img class="product-secondpic" alt=" Sample Product" src="../assets//product1.jpg"> </figure>
                          </a> </div>
                        <div class="product-meta">
                          <div class="product-action"> <a class="addcart" v-on:click='addShoppingCart(item.goods_id)'> <i class="icon-shopping-cart" >&nbsp;</i> Add to cart </a>
                 
                            <a class="wishlist" href="wishlist.html"> <i class="icon-heart">&nbsp;</i> </a>
                           
                            <a class="quickview" href="javascript:;"> <i class="icon-zoom">&nbsp;</i> </a> </div>
                        </div>
                      </div>
                    <div class="item-info">
                      <div class="info-inner">
                        <div class="item-title"> <a href="product_detail.html" title="Stablished fact reader"> {{ item.goods_name }} </a> </div>
                        <div class="item-title"> <a href="product_detail.html" title="Stablished fact reader"> 所属汽车：{{ item.belong_car }} </a> </div>
                        <div class="item-title"> <a href="product_detail.html" title="Stablished fact reader"> 商品种类：{{ item.goods_name }} </a> </div>
                        <div class="item-content">
                          <div class="item-price">
                            <div class="price-box">
                              <p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price" > ${{ item.goods_price }} </span> </p>
                              <p class="special-price"> <span class="price-label">Special Price</span> <span class="price" > ${{ item.goods_price }} </span> </p>
                            </div>
                          </div>
                          <div class="rating">
                            <div class="ratings">
                              <p class="rating-links"> <a href="#">1 Review(s)</a> <span class="separator">|</span> <a href="#">Add Review</a> </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

            </ul>
        </div>
      </div>
    <!-- </section> -->
  </div>
</div>

</template>

<script>
    var data;
    export default {
      name: 'product_list',
      data () {
        return {
          items: [],
        }
      },
      created() {
          // GET /someUrl
          this.$axios.get('/get_all_goods').then((response) => {
          this.items = response.data['data'];
          console.log(this.items)
          console.log(typeof this.items)
          }, response => {
          // error callback

        });
      },

      /*method beginning*/
      methods: {

        /*rmShoppingCart begin*/
        addShoppingCart: function(id) {
          let formData = new FormData();
          formData.append('goodsID',id);
          let config = {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
          }
          this.$http.post('/add_shoppingCart/', formData, config).then(function (res) {
              console.log(res.data)
              if (res.data['code'] == 0){
                this.items.splice(1)
              }             
            },
            function(res){
            })
            
        },
        /*rmShoppingCart end*/
      }

    }

</script>


<style scoped>

@import '../assets/css/style.css';
@import '../assets/css/font-awesome.css';
@import '../assets/css/bootstrap.min.css';

</style>
